[Adobe Edge Animate] CSSフィルタをアニメーションに使用する

Edge AnimateでCSSフィルタが扱えるようになった

HTML／CSS／JavaScriptを使ってアニメーションやインタラクティブコンテンツを作成することができる『Adobe Edge Animate』がバージョン1.5にアップデートされ、CSSフィルタが使えるようになっています。

基本的なタイムラインアニメーションをベースに、CSSフィルタを使った簡単なアニメーションを作成してみます。

Adobe Edge Animateについて

Adobe Edge Animate

ドキュメント

• Adobe Edge Animateは現在無料で提供されています。
• タイムラインやステージ、アクションエディタを用いたオーサリングを行うことができ、シンボルの扱い、FlashライクなGUIなどFlashの経験者であれば学習コストは抑えられると思われます。
• jQueryとAdobe製のライブラリが使用されています。
• アクションエディタを使用しないでもedgeActions.jsを外部編集して通信部分などを別途実装できることを確認しています。
• アニメーションはJSON形式で書かれます。

詳しくはこちらをどうぞ

CSS フィルタ

CSSフィルタによって以下のデザイン効果を与えることができます。

• Invert　反転
• Hue-Rotate　色相変更
• Contrast　コントラスト変更
• Saturate　彩度変更
• Sepia　セピア処理
• Greyscale　グレースケール処理
• Blur　ぼかし処理
• Shadow　ドロップシャドウ処理

サンプルソース

[HTML]-webkit-filter: blur(10px);[/HTML]

簡単に言うとフォトショップで行うようなグラフィック効果をCSSで行えるということです。

現在、CSSフィルタをサポートしているブラウザは下記になります。

Chrome, Safari, iOS6 Safari ,Blackberry 10 browsers

CSSフィルタを試してみたい方はこちらをどうぞ

アニメーションを作成する

1.画像を読み込む

画像をステージに読み込みます。

2.フィルタパネルを表示する

ステージに配置された画像を選択してフィルタパネルを展開します。

フィルタのプロパティが一覧表示されます。

3.キーフレームを設定する

タイムラインパネル上でアニメーションの開始点と終了点に再生ヘッドを移動してキーフレームを作成します。

4.フィルタのパラメーターを変更する

終了点に再生ヘッドが位置している状態で画像を選択してフィルタパネルの「反転」を100％に設定します。

 5.プレビューする

プレビューボタンを押して再生してみましょう。画像がアニメーションして徐々に色相が反転していくことが確認できます。

 

 

 備考:イージングも設定できる

必要に応じてキーフレームアニメーションに対してイージング（加減速）を設定できます。

プリセットが多数用意されているので適宜設定してみましょう。

 

アップデートを重ねてバグも減ってきて使い勝手も向上、軽快に動きますので、htmlでのアニメーションに興味をお持ちでまだ触れたことのない方はAdobe Edge Animateに触れてみるとよいかと思います。